<template>
  <view class="container">
    <!-- :refresher-fixed-bac-height='globalData.navBarHeight' -->
    <z-paging :refresher-end-bounce-enabled='false' :refresher-vibrate='true' refresher-complete-delay='200' refresher-threshold='50' ref="paging" v-model="dataList" @query="queryList">
      <view class="content">
        <view class="item" v-for='item in 3' @click="skip('/pages/orderDetails/orderDetails')">
          <view class="head">
            <view class="order-status ">
              <image src="@/static/myOrder/order_icon03.png" mode="aspectFill"></image>
              <view class="status-text">
                已完成
              </view>
            </view>
            <view class="order-price">
              费用合计：7.50元
            </view>
          </view>
          <view class="main">
            <view class="item-info">
              <view class="title">
                订单号:
              </view>
              <view class="info">
                <view class="copy">
                  复制
                </view>
                284015085476
              </view>
            </view>
            <view class="item-info">
              <view class="title">
                租借地点:
              </view>
              <view class="info">
                深圳北站1号站台
              </view>
            </view>
            <view class="item-info">
              <view class="title">
                租借时间:
              </view>
              <view class="info">
                2021-05-19 16:32:16
              </view>
            </view>
          </view>
          <view class="footer">
            <view class="total-time">
              <image src="@/static/myOrder/order_icon02.png" mode="aspectFill"></image>
              <view class="text">
                2小时8分钟
              </view>
            </view>
            <view class="delete-icon">
              <image src="@/static/myOrder/order_icon01.png" mode="aspectFill"></image>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

  </view>
</template>

<script setup lang="ts">
  import { ref } from "vue"

  let dataList = ref([])

  const queryList = () : void => {

  }
	
	function skip(url) {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
  page {
    background-color: #f4f6f9;
  }

  .container {
    background-color: #f4f6f9;

    .content {
      padding: 20rpx;

      .item {
        padding: 20rpx;
        background-color: #FFF;
        border-radius: 14rpx;
        margin-bottom: 20rpx;
				box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
				
        .head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 2rpx solid #f3f3f3;
          padding-bottom: 20rpx;

          .order-status {
            display: flex;
            align-items: center;

            image {
              width: 22rpx;
              height: 24rpx;
            }

            .status-text {
              margin-left: 10rpx;
              font-size: 24rpx;
              color: #3fc477;
            }
          }

          .order-price {
            font-size: 28rpx;
            color: #000;
          }
        }

        .main {
          border-bottom: 2rpx solid #f3f3f3;
          padding-bottom: 10rpx;
          .item-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 26rpx;
            color: #6c6c6c;
            padding: 10rpx 0;

            .title {}

            .info {
              display: flex;
              align-items: center;

              .copy {
                border-radius: 10rpx;
                border: solid 2rpx #6d6d6d;
                font-size: 22rpx;
                margin-right: 15rpx;
                color: #333333;
                padding: 4rpx 10rpx;
              }
            }
          }
        }

        .footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20rpx;

          .total-time {
            display: flex;
            align-items: center;

            image {
              width: 28rpx;
              height: 28rpx;
            }

            .text {
              margin-left: 10rpx;
              font-size: 26rpx;
              color: #05a5fe;
            }
          }

          .delete-icon {
            image {
              width: 30rpx;
              height: 32rpx;
            }
          }
        }
      }
    }
  }
</style>